import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Modal } from 'antd'
import moment from 'moment'
import style from './DetailModal.module.less'
import { download } from '@js/downloadRename'

const initState = {
  caseno_desc: '',
  remark: '',
  updater: '',
  update_datetime: '',
  handing_result: '',
  file: []
}

export default class DetailModal extends Component {
  state = {
    ...initState
  }

  formRef = React.createRef()

  initData () {
    const d = this.props.data
    const keys = Object.keys(initState)
    const r = {}
    keys.forEach(k => {
      if (d[k]) {
        r[k] = d[k]
      }
    })
    if (r.update_datetime) {
      r.update_datetime = moment(r.update_datetime * 1000).format('YYYY-MM-DD')
    }
    this.setState(r)
  }

  componentDidUpdate (prev) {
    if (!prev.visible && this.props.visible) {
      this.initData()
    }
  }

  render () {
    return (
      <Modal
        title='信访详情'
        open={this.props.visible}
        onCancel={() => this.props.hide()}
        footer={null}
        destroyOnClose
      >
        <div className={style.container}>
          <div className={style.line}>
            <div className={style.label}>案号</div>
            <div className={style.value}>
              <div className={style['value-text']}>{this.state.caseno_desc}</div>
            </div>
          </div>
          <div className={style.line}>
            <div className={style.label}>信访内容</div>
            <div className={style.value}>
              <div className={style['value-text']}>{this.state.remark}</div>
            </div>
          </div>
          <div className={style.line}>
            <div className={style.label}>处理人</div>
            <div className={style.value}>
              <div className={style['value-text']}>{this.state.updater}</div>
            </div>
          </div>
          <div className={style.line}>
            <div className={style.label}>处理结果</div>
            <div className={style.value}>
              <div className={style['value-text']}>{this.state.handing_result}</div>
            </div>
          </div>
          <div className={style.line}>
            <div className={style.label}>处理完成时间</div>
            <div className={style.value}>
              <div className={style['value-text']}>{this.state.update_datetime}</div>
            </div>
          </div>
          <div className={style.line}>
            <div className={style.label}>附件</div>
            <div className={style.value}>
              <div className={style['file-list']}>
                {(this.props.data.file || []).map((li, i) => <a onClick={() => download(li.path, li.original_filename)} key={i}>{li.original_filename}</a>)}
              </div>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

DetailModal.propTypes = {
  visible: PropTypes.bool,
  hide: PropTypes.func,
  data: PropTypes.object
}

DetailModal.defaultProps = {
  visible: false,
  hide: () => {},
  data: {}
}
